<template>
  <scroller>
    <panel title="width x height" type="primary">
      <tip type="warning" value="Weex screen width is 750" style="margin-bottom: 20px;"></tip>
      <div style="flex-direction:row">
        <image class="img" style="width: 300px; height: 300px;" :src="img"></image>
        <image class="img" style="width: 200px; height: 200px;" :src="img"></image>
        <image class="img" style="width: 50px; height: 50px;" :src="img"></image>
      </div>
    </panel>
    <panel title="GIF Animation" type="primary">
      <tip type="warning" value="Depanding on Native ImageSDK" style="margin-bottom: 20px;"></tip>
      <div style="flex-direction:row">
        <image class="img" style="width: 96px; height: 96px;" src="https://gtd.alicdn.com/tps/i4/T1HcvHXd4nXXb6ROYh-48-48.gif"></image>
        <image class="img" style="width: 68px; height: 68px;margin-left:20px;" src="https://gw.alicdn.com/tps/TB1El.mKXXXXXXyapXXXXXXXXXX-34-34.gif"></image>
      </div>
    </panel>
    <panel title="Base64" type="primary">
      <tip type="warning" value="Depanding on Native ImageSDK" style="margin-bottom: 20px;"></tip>
      <div style="flex-direction:row">
        <image class="img" style="width: 96px; height: 96px;" src=""></image>
        <image class="img" style="width: 68px; height: 68px;margin-left:20px;" src=""></image>
      </div>
    </panel>
    <panel title="resize" type="primary">
      <panel title="resize=stretch(default) 600 x 200 ">
        <image class="img" style=" width: 600px; height: 200px;border-style: solid;border-width: 1px;border-color: #333;" :src="img" resize="stretch"></image>
      </panel>
      <panel title="resize=contain 600 x 200 ">
        <image class="img" style=" width: 600px; height: 200px;border-style: solid;border-width: 1px;border-color: #333;" :src="img" resize="contain"></image>
      </panel>
      <panel title="resize=cover 600 x 200">
        <image class="img" style=" width: 600px; height: 200px;border-style: solid;border-width: 1px;border-color: #333;" :src="img" resize="cover"></image>
      </panel>
    </panel>
  </scroller>
</template>

<style scoped>
  .img {
    margin-bottom: 20px;
  }
</style>

<script>
  module.exports = {
    data: function () {
      return {
        img: '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg'
      }
    },
    components: {
      panel: require('../include/panel.vue'),
      tip: require('../include/tip.vue')
    }
  }
</script>
